import {reactive, ref, toRefs} from 'vue'
import { createFolder, getKanbanDir, removeGroup } from '@/api/screen/index'

const defaultValue = {
  id: 0,
  name: '全部',
  sort:0
}

export default function useFolder() {
  const folderData = reactive({
    id: defaultValue.id, // 选中的内容
    name: defaultValue.name, // 选中的分组名称
    sort: defaultValue.sort, // 选中的分组名称
    folderList: [],
    adding: false,
    visible:false
  })

  const toggleProject = ({ id, name, sort }) => {
    folderData.id = id
    folderData.name = name
    folderData.sort = sort

    categoryForm.value = {id,name,sort}
  }

  const categoryForm = ref({})

  // 获取大屏分组列表
  const getFolders = () => {
    getKanbanDir().then(res => {
      folderData.folderList = res
    })
  }

  const confirmDeleteGroup = (item) => {
    removeGroup(item).then(item=>{
      getFolders()
    })
  }

  const saveCategory = () => {
    createFolder(categoryForm.value).then(res => {
      folderData.visible = false
      getFolders()
    })
  }
  getFolders()
  return {
    ...toRefs(folderData),
    toggleProject,
    categoryForm,
    saveCategory,
    confirmDeleteGroup
  }
}
